<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级接水果游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <div class="menu" id="main-menu">
            <h1>高级接水果游戏</h1>
            <button id="start-button">开始游戏</button>
            <div class="menu-options">
                <button id="settings-button">设置</button>
                <button id="leaderboard-button">排行榜</button>
            </div>
        </div>
        
        <div class="game-area" id="game-area">
            <div class="score-container">
                <div class="score">分数: <span id="score">0</span></div>
                <div class="level">等级: <span id="level">1</span></div>
                <div class="timer">时间: <span id="timer">60</span></div>
            </div>
            <canvas id="game-canvas"></canvas>
            <div class="game-over" id="game-over">
                <h2>游戏结束</h2>
                <p>最终分数: <span id="final-score">0</span></p>
                <p>最高分: <span id="high-score">0</span></p>
                <button id="restart-button">重新开始</button>
            </div>
        </div>
        
        <div class="menu" id="settings-menu" style="display: none;">
            <h2>设置</h2>
            <div class="setting-item">
                <label for="sound-toggle">音效:</label>
                <input type="checkbox" id="sound-toggle" checked>
            </div>
            <div class="setting-item">
                <label for="music-toggle">音乐:</label>
                <input type="checkbox" id="music-toggle" checked>
            </div>
            <button id="back-to-menu">返回主菜单</button>
        </div>
        
        <div class="menu" id="leaderboard-menu" style="display: none;">
            <h2>排行榜</h2>
            <div class="leaderboard-container">
                <table id="leaderboard-table">
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>玩家</th>
                            <th>分数</th>
                        </tr>
                    </thead>
                    <tbody id="leaderboard-body">
                        <!-- 排行榜数据将通过JS动态加载 -->
                    </tbody>
                </table>
            </div>
            <button id="back-to-main-menu">返回主菜单</button>
        </div>
    </div>
    
    <audio id="background-music" loop>
        <source src="https://assets.codepen.io/21542/howler-demo-bg-music.mp3" type="audio/mpeg">
    </audio>
    <audio id="hit-sound">
        <source src="https://assets.codepen.io/21542/howler-demo-sprite.mp3" type="audio/mpeg">
    </audio>
    <audio id="miss-sound">
        <source src="https://assets.codepen.io/21542/howler-demo-sprite.mp3" type="audio/mpeg">
    </audio>
    
    <script src="game.js"></script>
</body>
</html>